<template>
	<div class="wrapper">
		<div class="top">
			<div class="intergal-now">当前积分 <span>{{userInfo.user_info.integral}}</span></div>
			<div class="intergal-btn">
				<div class="rule" @click="toIntergalRule">积分规则</div>
				<div class="total">历史总积分 <span>{{userInfo.user_info.history_total_integral}}</span></div>
			</div> 
		</div>
		
		<!-- <div class="task"> -->
			<task @updateIntergal="getUserInfo"></task>
		<!-- </div> -->
		<div class="goods-title">
			<div class="title-left">积分兑换</div>
			<div class="title-right" @click="toOrderList">
				<span>兑换记录</span>
				<span>></span>
			</div>
		</div>
		<div class="goods">
			<div class="goods-item" @click="toGoodsDetail(item)" v-for="(item,index) of goodsList" :key="index">
				<div class="goods-thumb">
					<image :src="item.thumb_Url"  mode="aspectFill"></image>
				</div>
				<div class="goods-msg">
					<div class="name">{{item.name}}</div>
					<div class="intergal" v-if="item.stock>0">{{item.exchange_integral}} <span>积分</span></div>
					<div class="intergal" v-else>已抢光</div>
					<div class="num">已兑{{item.sale_count}}</div>
				</div>
			</div>
		</div>
		<div class="no-tips" v-if="goodsList.length==0">
			<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/noCollect.png" mode="widthFix"></image>
			<div>暂未有积分商品</div>
		</div>
	</div>
</template>

<script>
	import task from '@/pages/components/shop/task'
	export default {
		data() {
			return {
				userInfo:{},
				pageNum:1,
				goodsList:[],
				userId:''
			}
		},
		components:{
			task
		},
		methods: {
			toIntergalRule(){
				//跳转积分规则
				uni.navigateTo({
					url:'/pages/shop/intergalRule/intergalRule'
				})
			},
			toOrderList(){
				//跳转记录
				uni.navigateTo({
					url:'/pages/shop/orderList/orderList'
				})
			},
			toGoodsDetail(item){
				uni.navigateTo({
					url:`/pages/shop/goodsDetail/goodsDetail?goodsId=${item.id}`
				})
			},
			async getUserInfo(){
				//获取用户信息
				let userToken=uni.getStorageSync('userToken')
				let res=await this.$api.getUserInfo({user_token:userToken});
				if(res.data.level=='success'){
					this.userInfo=res.data.data;
					this.userId=res.data.data.user_info.user_id;
				}
			},
			async getGoodsList(){
				//获取商品
				let params={
					page:this.pageNum,
					limit:20
				}
				let res=await this.$api.getGoodsList(params);
				if(res.data.level=='success'){
					this.goodsList=[...this.goodsList,...res.data.data]
				}
			},
		},
		onLoad() {
			this.getGoodsList()
		},
		onShow() {
			this.getUserInfo()
			
		},
		onShareAppMessage(){
		   return {
		    title: '哔哔机',
		    desc:'哔哔机',
			path: `/pages/index/index?inviteId=${this.userId}`
		  }
		},
		onReachBottom() {
			this.page++;
			this.getGoodsList()
		}
	}
</script>

<style lang="scss" scoped>
	@import '~@/static/scss/mixin.scss';
	
	.no-tips{
		margin-top:7vh;
		@include flexWrap();
		background: #fff;
		color:#6F7073;
		&>div{
			text-align: center;
			width: 100%;
		}
		}
	.top{
		background-image:url('https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/intergalBg.png') ;
		background-size:100% 100% ;
		width: calc(100vw - 60rpx);
		
		padding: 40rpx;
		box-sizing: border-box;
		margin-left:30rpx;
		border-radius:20rpx ;
		height: 240rpx;
		position: relative;
		.intergal-now{
			color:#F7F8FA;
			span{
				margin-left:10rpx;
				color:#FED22C;
				font-size: 60rpx;
				font-weight: 600;
			}
		}
		.intergal-btn{
			position: absolute;
			width: calc(100vw - 140rpx);
			bottom: 30rpx;
			@include flex(space-between);
			.rule{
				font-weight: 600;
				width:168rpx;
				height:60rpx;
				text-align: center;
				line-height: 60rpx;
				background:#3d3f41;
				border-radius:30rpx;
				color:#FED22C;
			}
			.total{
				
				color:#F7F8FA;
				font-size:28rpx;
				span{
					font-weight: 600;
					color:#FED22C;
				}
			}
		}
	}
	.wrapper{
		background:rgba(241,244,247,1);
		min-height: 100vh;
	}
	
	.goods-title{
		width: 100%;
		margin:70rpx 0 20rpx 0;
		padding:0 30rpx;
		@include flex(space-between);
		.title-left{
			font-size:32rpx;
			font-weight:600;
			color:rgba(0,0,0,1);
			line-height:32rpx;
		}
		.title-right{
			@include flex();
			color:#8B8D93;
			font-size:26rpx;
			font-weight:400;
			line-height:26rpx;
			image{
				width:60rpx;
				height: 60rpx;
			}
		}
	}
	.goods{
		@include  flexWrap(space-between);
		margin:0 30rpx;
		.goods-item{
			background: #fff;
			border-radius: 16rpx;
			box-shadow:0px 6px 24px 0px rgba(0,0,0,0.03);
			width:48%;
			box-sizing: border-box;
			margin:20rpx 0;
			overflow: hidden;
			.goods-thumb{
				image{
					border-top-left-radius:16rpx ;
					border-top-right-radius: 16rpx;
					width:100%;
					height: 300rpx;
				}
			}
			.goods-msg{
				color: #FD5F2A;
				padding:0 20rpx ;
				font-size: 32rpx;
				font-weight: 600;
				&>div{
					margin:20rpx 0;
				}
				span{
					font-size: 24rpx;
					font-weight: 400;
					color:rgba(139,141,147,1);
				}
				.name{
					color:#000;
					max-width: 100%;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
				.num{
					font-weight: 400;
					font-size: 24rpx;
					color:rgba(139,141,147,1);
				}
			}
		}
	}
</style>
